<template>
  <el-form label-width="80px" size="mini">
    <el-form-item label="选择图片">
      <uploader v-model="item.url"></uploader>

    </el-form-item>
    <el-form-item label="图片适应">
      <el-select v-model="item.fit">
        <el-option value="fill" label="fill"></el-option>
        <el-option value="contain" label="contain"></el-option>
        <el-option value="cover" label="cover"></el-option>
        <el-option value="none" label="none"></el-option>
        <el-option value="scale-down" label="scale-down"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="内边距">
      <el-input-number v-model="item.padding" :min="0"></el-input-number>
    </el-form-item>
    <el-form-item label="背景颜色">
      <el-color-picker v-model="item.backgroundColor"></el-color-picker>
    </el-form-item>
    <vpd-border-style :item="item"/>
    <el-collapse v-model="activeNames">
      <el-collapse-item title="文本" name="text">
        <vpd-text-style v-if="item.text" :item="item.text"/>
      </el-collapse-item>
    </el-collapse>
  </el-form>
</template>
<script>
  import DataSourceBtn from '../../dataSource/button';
  import Uploader from '../../designer/components/uploader';
  import VpdText from '../text/index'
  import VpdTextStyle from '../text/style'
  import VpdBorderStyle from '../styles/border.vue'

  export default {
    name: 'vpd-img-button-style',
    components: {
      DataSourceBtn,
      Uploader,
      VpdTextStyle,
      VpdBorderStyle
    },
    props: {
      item: {
        type: Object
      }
    },
    data() {
      return {
        activeNames: ['text'],
      }
    },
    watch: {
      'item.uuid': function (val) {
        this.initImgText();
      }
    },
    beforeMount() {
      this.initImgText();
    },
    methods: {
      initImgText() {
        if (!this.item.text || !this.item.text.type) {
          this.item.text = JSON.parse(JSON.stringify(VpdText.setting));
          this.item.text.textAlign = 'center';
        }
        this.item.text.w = '100%';
        this.item.text.h = 'auto';
      }
    }
  }
</script>
